/*
  学习目标：useEffect挂载和卸载综合写法

*/

import React, { useEffect, useState } from 'react';

export default function App() {
  const [isShow, setIsShow] = useState(true);
  return (
    <div>
      {isShow && <Child />}
      <button onClick={() => setIsShow(!isShow)}>点击卸载子组件</button>
    </div>
  );
}

function Child() {
  const resizeFn = () => {
    console.log('窗口改变了');
  };

  // 👍一个useEffect只维护一个逻辑的挂载和卸载
  // 👍多个逻辑的挂载和卸载， 使用多个useEffect维护

  useEffect(() => {
    const timerId = setInterval(() => {
      console.log('定时器再跑  ----->  ');
    }, 500);

    return () => {
      clearInterval(timerId);
    };
  }, []);

  useEffect(() => {
    window.addEventListener('resize', resizeFn);

    return () => {
      window.removeEventListener('resize', resizeFn);
    };
  }, []);

  // 👎逻辑混在一起不容易关系
  // useEffect(() => {
  //   const timerId = setInterval(() => {
  //     console.log('定时器再跑  ----->  ');
  //   }, 500);
  //   window.addEventListener('resize', resizeFn);

  //   return () => {
  //     clearInterval(timerId);
  //     window.removeEventListener('resize', resizeFn);
  //   };
  // }, []);

  return <div>我是子组件</div>;
}
